<template>
    <div>
        <el-select v-model="val1" placeholder="全部" @change="selectFn1" filterable>
            <el-option v-for="(item,index) in data"
                :key="index"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>

        <el-select v-model="val2" placeholder="全部" @change="selectFn2" filterable>
            <el-option v-for="item in data[cur1].children"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>

        <el-select v-model="val3" placeholder="全部" filterable>
            <el-option v-for="item in data[cur1].children[cur2].children"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
        
    </div>
</template>

<script>
    //import cityData from './filter.js'
    import {cityData} from './city.js'
    
    export default {
        name:"xSelectThree",
        props: {
            
        },
        data() {
            return {
                data: cityData,
                val1:"",
                val2:"",
                val3:"",
                cur1:0,
                cur2:0
            }
        },
        computed:{

        },
        created () {
            let list = []
            let data = [{pt:'交通',type:'公路施工',name:'评估法'},{pt:'交通',type:'公路施工',name:'评估法2'},{pt:'住建',type:'监理',name:'中和'}]
            data.map((item,index) => {
                if(!list.some(ele => ele.value === item.pt)){
                    list.push({label:item.pt,value:item.pt,children:[{label:item.type,value:item.type,children:[{label:item.name,value:item.name}]}]})
                }else{
                   let index = list.findIndex(f => f.value === item.pt)
                   if(!list[index].children.some(ele2=>ele2.value === item.type)){
                       list[index].children.push({label:item.type,value:item.type,children:[{label:item.name,value:item.name}]})
                   }else{
                       let index2 = list[index].children.findIndex(f2 => f2.value === item.type)
                       list[index].children[index2].children.push({label:item.name,value:item.name})
                   }
                }
            })
            console.log(data)
            console.log(list)
            this.data = list
        },
        methods: {
            selectFn1(val) {
                this.data.map((item,index) => {
                    item.value == val ? this.cur1 = index : ''
                })
                this.cur2 = 0
                this.val2 = ""
                this.val3 = ""
            },
            selectFn2(val) {
                this.data[this.cur1].children.map((item,index) => {
                    item.value == val ? this.cur2 = index : ''
                })
                this.val3 = ""
            }
        },
    }
</script>

<style lang="scss" scope>
    
</style>